<template>
  <view class="mypet">
    <view class="mypet-box">
      <view class="mypet-item" v-for="item in pet" :key="item.id">
        <view class="mypet-item-image">
          <image
            :src="item.image"
            mode="scaleToFill"
            @click="goinfor(item.id)"
          />
        </view>
        <view class="mypet-item-text">{{ item.name }}</view>
        <view class="mypet-item-t">
          <uv-input :placeholder="item.type" border="none">
            <template v-slot:suffix>
              <uv-icon
                name="edit-pen"
                size="30"
                @click="goinfor(item.id)"
              ></uv-icon>
            </template>
          </uv-input>
        </view>
      </view>
    </view>
    <view class="mypet-but">
      <uv-button
        text="新增宠物"
        shape="circle"
        color="#008c8c"
        @click="goaddpet"
      ></uv-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { uniRequest } from "../../../utils/request/request";
const pet = ref([
  { image: "https://picsum.photos/200?11", name: "宠物名称", id: 1 },
  { image: "https://picsum.photos/200?12", name: "宠物名称", id: 2 },
  { image: "https://picsum.photos/200?13", name: "宠物名称", id: 3 },
  { image: "https://picsum.photos/200?14", name: "宠物名称", id: 4 },
]);
const goaddpet = () => {
  uni.navigateTo({
    url: "/pages/Pet/addpets/addpets",
  });
};
const goinfor = (id) => {
  uni.navigateTo({
    url: `/pages/Pet/petinfor/petinfor?id=${id}`,
  });
};
onLoad(() => {
  uniRequest(
    "pet/index?server=1",
    function (err, data) {
      if (err) {
        // 错误
        console.log(err);
      } else {
        pet.value = data;
        console.log(pet.value);
      }
    },
    "POST"
  );
});
</script>

<style lang="scss">
@import url(./mypet.css);
</style>
